---
import { frontmatter } from "@content/about.md"
import "../assets/font.css"
import "../assets/icon.css"
export interface Props {
    title?: string
    lang?: string
    style?: Record<string, string>
}
const { fullname, username } = frontmatter
const { title, lang = "ru", style = {} } = Astro.props

const _title = title ? `${title} - ${fullname}` : fullname
---

<!doctype html>
<html lang={lang}>
    <head>
        <link rel="sitemap" href="/sitemap-index.xml" />
        <meta charset="UTF-8" />
        <meta name="generator" content={Astro.generator} />
        <meta name="viewport" content="width=device-width" />

        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <title>{_title}</title>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

        <meta name="author" content={username} />
        <slot name="seo" />
    </head>
    <body style={style}>
        <slot />
    </body>
</html>
<style is:global>
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :focus-visible {
        outline: 2px solid royalblue;
        outline-offset: 0.2em;
    }

    :root {
        --text-color: #444;
        --background-color: white;
        --accent-color: #5478b6;
        --link-color: #3f5986;
        --title-color: black;

        font-family: "Montserrat", sans-serif;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --background-color: #2a2a2a;
            --title-color: white;
            --text-color: #ccc;
        }
    }
    @media (width >= 600px) {
        :root {
            font-size: 1.1em;
        }
    }
    body {
        width: 100vw;
        overflow-x: hidden;
        margin: 0;
        line-height: 1.5;
        padding: 0;
        background: var(--background-color);
        color: var(--text-color);
    }

    hr {
        margin: var(--gap, 1em) 0;
        height: 1px;
        border: none;
        border-bottom-style: solid;
    }
    .vertical-line {
        border-left-style: solid;
        height: 100%;
        margin: 0 var(--gap, 1em);
    }

    .horizontal-line,
    .vertical-line {
        border-color: currentColor;
        opacity: 0.1;
        border-width: 1px;
    }

    a {
        color: var(--link-color, var(--accent-color));
        &:hover {
            text-decoration: none;
        }
        &:where(:visited) {
            color: var(
                --link-visited-color,
                var(--link-color, var(--accent-color))
            );
        }
    }
    .link--icon {
        --icon-size: 1.3em;
        white-space: nowrap;
        display: inline-block;
    }

    ul {
        display: grid;
        gap: 0.1em;
    }
</style>
